<template>
  <div class="main-wrapper">
    <div class="filter-container">
      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.statusName" :value="item.key" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="{row}">
          {{ row.projectName }}
        </template>
      </el-table-column>
      <el-table-column label="发布方" align="center">
        <template slot-scope="{row}">
          {{ row.employerName }}
        </template>
      </el-table-column>
      <el-table-column label="承接方" align="center">
        <template slot-scope="{row}">
          {{ row.contractorName }}
        </template>
      </el-table-column>
      <el-table-column label="评价内容" align="center">
        <template slot-scope="{row}">
          {{ row.content }}
        </template>
      </el-table-column>
      <el-table-column label="评价人" align="center">
        <template slot-scope="{row}">
          {{ row.type===1?'发布方评价':'承接方评价' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          {{ row.status | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <!-- <el-button size="mini" type="success" @click="handleDetail(row)">详情</el-button> -->
          <el-button v-if="row.status!=0" size="mini" type="danger" @click="delProjectAppraise(row)">不显示</el-button>
          <el-button v-if="row.status!=1" size="mini" type="success" @click="reuseProjectAppraise(row)">显示</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchProjectAppraiseList" />

    <el-dialog title="详情" :visible.sync="dialogDetailVisible">
      <el-form ref="dataForm" :model="projectAppraiseData" label-position="left" label-width="90px">
        <el-form-item label="ID">
          <span>{{ projectAppraiseData.id }}</span>
        </el-form-item>
        <el-form-item label="项目ID">
          <span>{{ projectAppraiseData.projectId }}</span>
        </el-form-item>
        <el-form-item label="发包方ID">
          <span>{{ projectAppraiseData.employerId }}</span>
        </el-form-item>
        <el-form-item label="接包方ID">
          <span>{{ projectAppraiseData.contractotId }}</span>
        </el-form-item>
        <el-form-item label="评价内容">
          <span>{{ projectAppraiseData.content }}</span>
        </el-form-item>
        <el-form-item label="操作类型  1 发包方评价接包方 2 接包方评价发包方">
          <span>{{ projectAppraiseData.type }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ projectAppraiseData.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectAppraiseList, editProjectAppraiseStatus } from '@/api/projectAppraise'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  name: 'ProjectAppraise',
  components: {
    Pagination
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    statusFilter(value) {
      const statusMap = { 0: '不显示', 1: '显示' }
      return statusMap[value]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      statusOptions: [
        { key: 0, statusName: '不显示' },
        { key: 1, statusName: '显示' }
      ],
      projectAppraiseData: {},
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      rules: {}
    }
  },
  created() {
    this.fetchProjectAppraiseList()
  },
  methods: {
    fetchProjectAppraiseList() {
      this.listLoading = true
      getProjectAppraiseList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchProjectAppraiseList()
    },
    resetProjectAppraiseData() {
      this.projectAppraiseData = {}
    },
    handleDetail(row) {
      this.projectAppraiseData = Object.assign({}, row)
      this.dialogDetailVisible = true
    },
    delProjectAppraise(row) {
      row.status = 0
      this.updateProjectAppraiseStatus(row, 0)
    },
    reuseProjectAppraise(row) {
      row.status = 1
      this.updateProjectAppraiseStatus(row, 1)
    },
    updateProjectAppraiseStatus(row, status) {
      row.status = status
      editProjectAppraiseStatus(row.id, status).then(() => {
        this.fetchProjectAppraiseList()
        console.log('----', this.list)
      })
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  margin: 8px;
  .filter-container {
    padding: 10px 0;
    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }
}
</style>
